<template>
  <div id="file">
      <headerNav :menu="showMenu" :menuList="login.pageList"></headerNav>
      <header>
        <p>当前模块：文件管理  当前登录人：{{login.name}}  登录时间：{{login.loginTime | timeFormat}}</p>
        <div>
        <el-button size="mini" type="primary" @click="$router.push('login')" icon="el-icon-delete">退出</el-button>
        <el-button size="mini" type="primary" @click="reflash()" icon="el-icon-refresh">刷新</el-button>
        </div>
      </header>
      <div class="upload_bo">
        
        <el-upload
          class="upload-demo"
          drag
          accept="image/*"
          action="http://localhost:9081/upload"
          multiple
          :on-success="uploadSucess"
          :on-remove="handleRemove"
          ref="upload"
          >
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传图片文件，且不超过500kb</div>
        </el-upload>

        <h2>你可以在此处便捷上传文件<br/>文件大小小于500KB</h2>
      </div>
      <div class="wrap">
          <div class="table-border">
            <el-table ref="tableElm" :data="tableData" style="width: 100%" :default-sort = "{prop: 'createTime', order: 'descending'}">
                <el-table-column type="index" width="50"></el-table-column>
                <el-table-column sortable prop="fileName" label="文件名" ></el-table-column>
                <el-table-column sortable prop="filePath" label="文件路径" ></el-table-column>
                <el-table-column sortable prop="suffix" label="文件后缀" ></el-table-column>
                <el-table-column sortable prop="MD5" label="文件MD5码" ></el-table-column>
                <el-table-column sortable prop="createTime" label="创建时间" ></el-table-column>
                <el-table-column label="操作" width="200">
                    <template slot-scope="scope">
                        <el-button size="mini" icon="el-icon-delete" @click="deleteFile(scope.$index, scope.row,true)" type="danger">删除</el-button>
                        <el-button size="mini" icon="el-icon-view" @click="showFile(scope.$index, scope.row,true)" type="primary">预览</el-button>
                    </template>
                </el-table-column>
            </el-table>

            <div class="page">
                <el-pagination
                    background
                    layout="prev, pager, next"
                    :total="total"
                    @current-change="handleCurrentChange"
                    >
                </el-pagination>
            </div>
          </div>
            
        <el-dialog title="图片预览" :visible.sync="dialogVisible">
          <div style="margin:16px auto;display:flex;justify-content: center;">
            <el-image 
                style="width: auto;"
                :src="url" 
                :preview-src-list="srcList"
                fit="cover"
                >
            </el-image>
          </div>
        </el-dialog>
      </div>
  </div>
</template>
<script>
  import {timeFormat} from '../../assets/time.js'
  import {FormatPath} from '../../assets/path.js'
  import headerNav from '../header.vue'
  export default {
    components: {headerNav},
    name: 'file',
    data () {
      return {
        dialogVisible: false,
        showMenu: true,
        pageNum: 1,
        pageOnce: 10,
        url: '',
        srcList: [],
        login: {
          name: '',
          loginTime: ''
        },
        tableData: [],
        total: 0
      }
    },
    filters: {
      timeFormat: function (val) {
        return val ? timeFormat(val, 'yyyy-MM-dd hh:mm:ss') : ''
      }
    },
    mounted: function () {
      this.getLoginMess()
      this.getFils()
    },
    methods: {
      reflash () {
        location.reload()
      },
      uploadSucess () {
        this.getFils()
      },
      handleRemove (file) {
        // debugger
        // console.log(file.response.data[0].filePath, fileList);
        this.deleteFile(0, file.response.data[0])
      },
      // 更新控件列表
      updataUploadFiles (filePath) {
        let deleteIndex = ''
        this.$refs.upload.uploadFiles.forEach((el, index) => {
          if (el.response.data[0].filePath === filePath) {
            deleteIndex = index
          }
        })

        try {
          this.$refs.upload.uploadFiles.splice(deleteIndex, 1)
        } catch (error) {
  
        }
      },
      getLoginMess () {
        this.$http.get('http://localhost:9081/getLoginMess').then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            this.login = Object.assign(res.data.data)
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      },
      getFils () {
        this.$http.post('http://localhost:9081/getFiles', {
          pageNum: this.pageNum,
          pageOnce: this.pageOnce
        }).then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            this.tableData = res.data.data.list
            this.total = res.data.data.total
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      },
      handleCurrentChange (val) {
        console.log(`当前页: ${val}`)
        this.pageNum = val
        this.getFils()
      },
      // 删除文件
      deleteFile (index, rowData, isTrgger) {
        this.$http.post('http://localhost:9081/deleteFile', {
          filePath: rowData.filePath
        }).then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            // 如果删除的是最后一个文件
            if (index === this.tableData.length - 1) {
              if (this.pageNum != 1 && this.tableData.length === 1) {
                this.pageNum--
              }
            }
            this.getFils()
            isTrgger && this.updataUploadFiles(rowData.filePath)
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      },
      // 预览文件
      showFile (index, rowData) {
        if (/(jpg|png|jpeg)/i.test(rowData.suffix)) {
          this.dialogVisible = true
          this.url = FormatPath(rowData.filePath)
          this.srcList = [FormatPath(rowData.filePath)]
        } else {
          // this.$message.error(`暂不支持非图片类预览！`)
          // this.$electron.shell.openExternal()
          this.openChrome(FormatPath(rowData.filePath))
        }
      },
      openChrome (url) {
        this.$http.post('http://localhost:9082/openChrome', {
          url: url
        }).then((res) => {
          if (res.status === 200 && res.data.code === 'ok') {
            this.$message.success(`${res.data.msg}`)
          } else {
            this.$message.error(`${res.data.msg}`)
          }
        })
      }
    }
}
</script>
<style scoped  lang="less">
    #file{
      header{
        width:100%;
        height:40px;
        background: #fff;
        border:1px solid #ccc;
        box-shadow: 0 1px rgba(0,0,0,.2);
        display: flex;
        font-size:16px;
        padding:4px 8px;
        align-items: center;
        justify-content: flex-end;
        p{
          padding-right:16px;
        }
      }

      .upload_bo{
        background: #fff;
        padding:8px;
        margin-top:8px;
        display: flex;
        // justify-content: flex-end;
        h2{
          line-height: 32px;
          margin:8px 16px 0 32px
        }
      }

      .wrap{
        margin-top:8px;
        padding:16px;
        background: #fff;
        font-size:12px;
        h2{
          font-size:16px;
          line-height:32px;
          margin-bottom: 16px;
        }
        .table-border{
            border: 1px solid #ebebeb;
            border-radius: 3px;
            transition: .2s;
            padding:16px;
            .page{
                margin:16px 0;
                display: flex;
                align-items: center;
                justify-content: center;
            }
        }
      }
    }
</style>